<script lang="ts" setup>
import { ref, PropType } from 'vue'
import { SeckillRoundVO, SeckillQueryStatus, SeckillStatus } from '@/apis/plugin/secKill/model'
import Countdown from '@plugin/secKill/components/decorationComponents/countdown.vue'

defineProps({
  data: { type: Array as PropType<SeckillRoundVO[]>, default: () => [] },
  modelValue: { type: Object as PropType<SeckillRoundVO | null>, default: () => ({}) },
})
const emit = defineEmits(['update:modelValue', 'chooseSecondsKill', 'updateSecondsKill'])
const acitve = ref(0)
const countdownRef = ref()

function startTimeFormat(time: string) {
  return time.split(' ')[1], time.split(' ')[1].substring(0, 5)
}

const handleClick = (item: SeckillRoundVO, index: number) => {
  if (acitve.value === index) {
    return
  }
  updateCountdown()
  emit('update:modelValue', item)
  emit('chooseSecondsKill')
  acitve.value = index
}
const handleEnd = () => {
  emit('updateSecondsKill')
}
/**
 * 更新倒计时
 */
const updateCountdown = () => {
  if (countdownRef.value) {
    countdownRef.value.loadCountdown()
  }
}
defineExpose({ updateCountdown })
</script>

<template>
  <view class="seconds-kill-head">
    <view class="seconds-kill-head__container">
      <scroll-view scroll-x style="white-space: nowrap">
        <view v-for="(item, index) in data" :key="index" class="seconds-kill-head__item" @click="handleClick(item, index)">
          <view :class="{ 'secon-kill-ongoing': item.status === SeckillQueryStatus.IN_PROGRESS }" class="seconds-kill-head--time">
            {{ startTimeFormat(item.time.start) }}
          </view>
          <view :class="{ 'secon-kill-acitve': acitve === index }" class="seconds-kill-head--status">
            {{ SeckillStatus[item.status].desc }}
          </view>
        </view>
      </scroll-view>
      <view class="seconds-kill-head__end-time">
        <u-icon color="#dddddd" name="minus" />
        <view class="seconds-kill-head__end-time--text">
          <text style="margin-right: 10rpx">
            {{ SeckillStatus[modelValue.status].timerDesc }}
          </text>
          <Countdown ref="countdownRef" :is-start="false" :start-time="SeckillStatus[modelValue.status].timePick(modelValue)" @end="handleEnd" />
        </view>
        <u-icon color="#dddddd" name="minus" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@include b(seconds-kill-head) {
  height: 220rpx;
  font-size: 28rpx;
  font-weight: normal;
  color: #333333;
  text-align: center;
  @include e(container) {
    position: relative;
    height: 180rpx;
    background: linear-gradient(90deg, #e94927, #dd3324);
  }
  @include m(time) {
    margin: 20rpx 0 10rpx 0;
    font-size: 40rpx;
    font-weight: Bold;
    color: #ffdcdc;
  }
  @include m(status) {
    display: inline-block;
    padding: 5rpx 10rpx;
    border-radius: 22rpx;
    font-size: 24rpx;
    font-weight: 700;
    color: #ffdcdc;
  }
  @include e(box) {
    display: flex;
  }
  @include e(item) {
    display: inline-block;
    width: calc(33.33%);
  }
  @include e(end-time) {
    position: absolute;
    bottom: -40rpx;
    left: 30rpx;
    right: 30rpx;
    color: #000;
    height: 80rpx;
    background: #ffffff;
    border-radius: 16rpx;
    font-size: 24rpx;
    @include flex;
    @include m(text) {
      display: flex;
      align-items: center;
      margin: 0 20rpx;
    }
  }
}

@include b(secon-kill-ongoing) {
  color: #ffffff;
}

@include b(secon-kill-acitve) {
  background: linear-gradient(180deg, #f2fcff, #f5d2d0);
  color: #e33e26;
}
</style>
